<template>
    <el-card shadow="never" class="!border-none">
        <el-page-header :content="id ? '编辑推销员服务' : '新增推销员服务'" @back="$router.back()" />
    </el-card>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
        <el-card shadow="never" style="margin-top: 15px" class="!border-none">
            <!-- 用户绑定 -->
            <el-form-item label="绑定推销员:" prop="salesmanId">
                <!-- <user-select
          btn-text="选择推销员"
          type="primary"
          v-model="formData.salesmanId"
          :userVo="formData.userVo"
          :id="id"
        /> -->
                <el-select v-model="formData.salesmanId" filterable :disabled="id" placeholder="请选择">
                    <el-option v-for="item in formData.userList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <div class="serviceItem">
                <el-form-item label="服务项目:" prop="productId">
                    <!-- <service-select
            v-model="formData.productId"
            v-model:selectData="formData.goodsList"
            v-perms="['goods:list']"
          >
            <template #popup>
              <el-button type="primary">选择服务</el-button>
            </template>
</service-select> -->
                    <el-select v-model="formData.productId" filterable :disabled="id" placeholder="请选择">
                        <el-option v-for="item in formData.productList" :key="item.id" :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="价格:" prop="productPrice">
                <el-input class="w-56 ls-input" v-model="formData.productPrice" placeholder="请输入价格" />
            </el-form-item>
        </el-card>
    </el-form>
    <footer-btns>
        <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
    </footer-btns>
</template>

<script lang="ts" setup>
import {
    apigoogsdetail,
    apigoogsadd,
    salesmanEdit,
    salesmanLists,
    apigoogsedit,
    apigoogsdel,
    apigoodslsit,
} from "@/api/salesman";
import { ref, reactive } from "vue";
import FooterBtns from "@/components/footer-btns/index.vue";
import UserSelect from "@/components/user-select/index.vue";
import AreaSelect from "@/components/area-select/index.vue";
import ServiceSelect from "@/components/service-select/index.vue";
import type { ElForm } from "element-plus";
import feedback from "@/utils/feedback";
import { number } from "echarts/core";

/** Interface Start **/
interface formDataObj {
    salesmanId?: number | string;
    productId: number | string | any;
    productPrice: number | string;
    goodsList: any;
    userList: any;
    productList: any;
}
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
/** Interface End **/

/** Data Start **/
const route = useRoute();
const router = useRouter();
const id: any = route.query.id;
const formData = ref<formDataObj>({
    salesmanId: "", //推销员id
    productId: "", //服务id
    productPrice: 0, //价格
    goodsList: [],
    userList: [],
    productList: [],
});

// 表单校验规则
const rules = reactive<object>({
    salesmanId: [{ required: true, message: "请选择用户", trigger: [] }],
});
/** Data End **/

/** Methods Start **/

// 获取详情
const getapigoogsdetail = async (id: number): Promise<void> => {
    (formData.value as {}) = await apigoogsdetail({ id });
};
// 获取推销员
const getsalesmanLists = async (): Promise<void> => {
    const datares = await salesmanLists();
    console.log(datares, "datares");
    formData.value.userList = datares.lists;
};
// 获取所有的服务
const getproductList = async (): Promise<void> => {
    const params = {
        pageNo: 1,
        pageSize: 9999
    };
    const datares = await apigoodslsit(params);
    console.log(datares, "datares");
    formData.value.productList = datares.lists;
};
// 添加师傅
const handlesalesmanAdd = async (): Promise<void> => {
    //   const productId = formData.value.productId.join(",");
    //   console.log({ ...formData.value, productId });

    const params = {
        salesmanId: formData.value.salesmanId, //推销员id
        productId: formData.value.productId[0], //服务id
        productPrice: Number(formData.value.productPrice), //价格
    };

    await apigoogsadd({ ...formData.value });
    router.back();
    feedback.msgSuccess("操作成功");
};
// 编辑师傅
const handlesalesmanEdit = async (): Promise<void> => {
    //   const productId = formData.value.productId.join(",");

    const params = {
        id: Number(id),
        productPrice: Number(formData.value.productPrice), //价格
    };
    console.log(params, "apigoogsedit-params");

    await apigoogsedit(params);
    router.back();
    feedback.msgSuccess("操作成功");
};
// 提交数据
const onSubmit = (formEl: FormInstance | undefined): void => {
    //   formData.value.productId = formData.value.goodsList.map((item) => item.id);
    if (!formEl) return;
    formEl.validate((valid): boolean | undefined => {
        if (!valid) return false;
        if (!id) handlesalesmanAdd();
        else handlesalesmanEdit();
    });
};
/** Methods End **/

/** LifeCycle Start **/
// 请求详情 => 如果是编辑的话
getsalesmanLists();
getproductList();
if (id) getapigoogsdetail(id);

/** LifeCycle End **/
</script>

<style lang="scss" scoped>
.ls-input,
.select {
    width: 340px;
}

.serviceItem :deep() .el-form-item__content {
    display: block;
}

.serviceItem :deep() .dialog__trigger {
    width: 80px;
}
</style>
